<template>
  <view>
    <view class="flex text-center" style="position: sticky;top: 0;z-index: 10000">
      <view v-for="(item, index) in tab" :class="index === current? 'cur ' + color[index] : 'bg-white'" class="cu-item flex-sub"
            @click="current = index" style="line-height: 70rpx;">
        {{ item }}
      </view>
    </view>
    <purple v-if="current === 0"/>
    <orange v-else-if="current === 1"/>
    <red v-else/>
  </view>
</template>

<script>
  import purple from "@/components/purple.vue";
  import orange from "@/components/orange.vue";
  import red from "@/components/red.vue";

  export default {
    components: {
      purple,
      orange,
      red
    },
    data() {
      return {
        tab: ["紫卡", "橙卡", "红卡"],
        color: ["bg-purple", "bg-orange", "bg-red"],
        current: 0
      };
    },
    onLoad() {
      this.adOption = {
        adUnitId: 'adunit-af0055cae56d6a85'
      };
      // 创建广告实例
      this.createInterstitialAd();
    },
    methods: {
      createInterstitialAd() {
        let interstitialAd = this.interstitialAd = uni.createInterstitialAd(this.adOption);
        interstitialAd.onLoad(() => {
          this.showInterstitialAd()
        });
      },
      showInterstitialAd() {
        this.interstitialAd.show().then(() => {
        });
      }
    }
  }
</script>

<style lang="scss">

</style>
